<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="../../commons/import_taglibs.jsp" %>
<div class="panel panel-default">
    <div class="panel-heading"><b>执行部署</b></div>
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-12">
                <form role="form" id="infoForm" class="form-horizontal" enctype="multipart/form-data"
                      action="/deploy/info/save"
                      method="post">

                    <div class="form-group">
                        <label class="col-lg-2 control-label">部署项目</label>
                        <div class="col-lg-9">
                            <select class="form-control" name="projectId" onchange="projectChange(this)">
                                <option value="">--请选择--</option>
                                <c:forEach items="${projectList}" var="project">
                                    <option value="${project.id}"
                                            data-projectPath="${project.path}"
                                            data-projectDesc="${project.desc}">${project.name}
                                    </option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label">项目路径</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control" disabled name="projectPath"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label">项目备注</label>
                        <div class="col-lg-9">
                            <textarea class="form-control" rows="3" disabled name="projectDesc"></textarea>
                        </div>
                    </div>

                    <hr>

                    <div class="form-group">
                        <label class="col-lg-2 control-label">部署备注</label>
                        <div class="col-lg-9">
                            <textarea class="form-control" name="desc" rows="10" placeholder="请输入..."></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label">部署压缩包</label>
                        <div class="col-lg-9">
                            <div class="input-group">
                                <input class="form-control" type="file" name="deployZip" accept=".zip">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" id="previewZip">
                                        <i class="glyphicon glyphicon glyphicon-eye-close"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" id="unzipFileDetail" style="display:none;">
                        <label class="col-lg-2 control-label">预读</label>
                        <div class="col-lg-9">
                            <div id="sycReadContent" class="alert alert-danger alert-dismissible fade in" role="alert">
                                <strong id="sycReadHeader">未读取压缩包!</strong>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-2">
                            <button type="submit" class="btn btn-primary">部署</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- /.row (nested) -->
    </div>
    <!-- /.panel-body -->
</div>
<script type="text/javascript">
    function projectChange(thiz) {
        var projectId = $(thiz).val();
        if (projectId == null || projectId == '') {
            $("#infoForm input[name=projectPath]").val("");
            $("#infoForm textarea[name=projectDesc]").html("");
            return;
        }

        var $selectedOption = $(thiz).children('option[value=' + projectId + ']');
        var projectPath = $selectedOption.attr("data-projectPath");
        var projectDesc = $selectedOption.attr("data-projectDesc");
        $("#infoForm input[name=projectPath]").val(projectPath);
        $("#infoForm textarea[name=projectDesc]").html(projectDesc);
    }

    $(document).ready(function () {
        // 压缩包异步校验
        $("#infoForm input[name=deployZip]").on('change',function(e){
            // 重置
            var $content = $('#sycReadContent');
            $content.addClass('alert-danger').removeClass('alert-success');
            var $header = $('#sycReadHeader').html('未读取压缩包!');
            $content.html("").append($header);
            if($(this).val() == '')
                return;

            // loading...
            layer.load(0, { shade: [0.1, '#000'] });

            // 封装文件formdata，并异步提交
            var formData = new FormData();
            formData.append('file', $(this)[0].files[0]);
            $.ajax({
                url: '/deploy/info/sycReadZip',
                type: 'POST',
                data: formData,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success: function (result) {
                    // 关闭loading效果
                    setTimeout(function(){ layer.closeAll('loading'); }, 1000);

                    // 更新标题
                    $header.html(result.message);
                    // 更新文件列表
                    if(result.success){
                        $content.removeClass('alert-danger').addClass('alert-success');
                        if(result.files != null && result.files.length > 0){
                            $content.append('<hr>');
                            $.each(result.files, function (idx, file) {
                                $content.append('<li style="font-size: 10px;">' + file + '</li>');
                            });
                        }
                    } else {
                        $content.removeClass('alert-success').addClass('alert-danger');
                    }

                    // 显示预读详情，提示结果
                    if($('#unzipFileDetail').is(':hidden'))
                        $('#previewZip').click();
                }
            });
        });

        // 是否展示预读详情
        $('#previewZip').on('click', function () {
            var $detail = $('#unzipFileDetail');
            var $icon = $('#previewZip>i');
            if($detail.is(":hidden")){
                $detail.slideDown('snow');
                $icon.removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open')
            } else {
                $detail.slideUp('snow');
                $icon.removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close')
            }
        });

        // 前端校验 + 提交
        $('#infoForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                projectId: {
                    message: 'The value is not valid',
                    validators: {
                        notEmpty: {
                            message: '必填项不能为空！'
                        }
                    }
                },
                deployZip: {
                    message: 'The value is not valid',
                    validators: {
                        notEmpty: {
                            message: '必填项不能为空！'
                        }/*,
                         file: {
                         extension: 'zip',
                         type: 'application/zip',
                         maxSize: 5*1024*1024,   // 100 MB
                         message: '压缩包验证失败！'
                         }*/
                    }
                },
                desc: {
                    message: 'The value is not valid',
                    validators: {
                        notEmpty: {
                            message: '必填项不能为空！'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            e.preventDefault();

            // loading...
            layer.load(0, { shade: [0.1, '#000'] });

            // 封装文件formdata，并异步提交
            var $form = $(e.target);
            var formData = new FormData($form[0]);
            formData.append('file', $("#infoForm input[name=deployZip]")[0].files[0]);
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: formData,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success: function (result) {
                    // 关闭loading效果
                    setTimeout(function(){ layer.closeAll('loading'); }, 1000);

                    // 弹出提示
                    layer.msg(result.message, {
                        shade: [0.3, '#000'],
                        icon: (result.success ? 1 : 2)
                    }, function () {
                        $("#infoForm button[type=submit]").removeAttr("disabled");
                        if(result.log === undefined)
                            return;

                        //弹出即全屏
                        var index = layer.open({
                            type: 1,
                            content: result.log,
                            maxmin: true,
                            cancel: function () {
                                if (result.success) {
                                    $('#page-wrapper').load('/deploy/info/list');
                                }
                            }
                        });
                        layer.full(index);
                    });
                }
            });
        });
    });
</script>